<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车流量OD分析</title>
</head>
<body>
    <div id="OAnalysisMap" style="height: 920px;width: 49.9%;float: left">
        <!-- 这里以后是地图 -->
    </div>
    <div id="DAnalysisMap" style="height: 920px;width: 49.9%;float: right">
        <!-- 这里以后是地图 -->
    </div>
</body>
<!--<script src="../../../mapData/js/jquery.min.js"></script>
<script type="text/javascript" src="../../../mapData/js/echarts/echarts.js"></script>
<script src="../../../mapData/js/map/china.js"></script>-->
<script type="text/javascript" src="../../../js/echartsEncapsulation/MapGis.js"></script>
<script type="text/javascript">
    var geoCoordMap = {
        '一大队': [113.1279, 36.2036],
        '二大队': [113.1164, 36.1715],
        '三大队': [113.0906, 36.2137],
        '四大队': [113.0926, 36.1474],
        '五大队': [113.1204, 36.2741],
        '七大队': [113.0790, 36.1828],
        '八大队': [113.1412, 36.3409]
    };

    var Odata1 = [
        [{name:'一大队'}, {name:'二大队',value:95}],
        [{name:'一大队'}, {name:'三大队',value:900}],
        [{name:'一大队'}, {name:'四大队',value:80}],
        [{name:'一大队'}, {name:'五大队',value:700}],
        [{name:'一大队'}, {name:'七大队',value:60}],
        [{name:'一大队'}, {name:'八大队',value:50}]
    ];

    var Odata2 = [
        [{name:'二大队'},{name:'一大队',value:95}],
        [{name:'二大队'},{name:'三大队',value:90}],
        [{name:'二大队'},{name:'四大队',value:80}],
        [{name:'二大队'},{name:'五大队',value:70}],
        [{name:'二大队'},{name:'七大队',value:600}],
        [{name:'二大队'},{name:'八大队',value:50}]
    ];

    var Odata3 = [
        [{name:'三大队'},{name:'一大队',value:95}],
        [{name:'三大队'},{name:'二大队',value:90}],
        [{name:'三大队'},{name:'四大队',value:80}],
        [{name:'三大队'},{name:'五大队',value:700}],
        [{name:'三大队'},{name:'七大队',value:60}],
        [{name:'三大队'},{name:'八大队',value:50}]
    ];

    var Ddata1 = [
        [{name:'二大队',value:95},{name:'一大队'}],
        [{name:'三大队',value:900},{name:'一大队'}],
        [{name:'四大队',value:80},{name:'一大队'}],
        [{name:'五大队',value:700},{name:'一大队'}],
        [{name:'七大队',value:60},{name:'一大队'}],
        [{name:'八大队',value:50},{name:'一大队'}]
    ];

    var Ddata2 = [
        [{name:'一大队',value:95},{name:'二大队'}],
        [{name:'三大队',value:90},{name:'二大队'}],
        [{name:'四大队',value:80},{name:'二大队'}],
        [{name:'五大队',value:70},{name:'二大队'}],
        [{name:'七大队',value:600},{name:'二大队'}],
        [{name:'八大队',value:50},{name:'二大队'}]
    ];

    var Ddata3 = [
        [{name:'一大队',value:95},{name:'三大队'}],
        [{name:'二大队',value:90},{name:'三大队'}],
        [{name:'四大队',value:80},{name:'三大队'}],
        [{name:'五大队',value:700},{name:'三大队'}],
        [{name:'七大队',value:60},{name:'三大队'}],
        [{name:'八大队',value:50},{name:'三大队'}]
    ];
    //业务数据对象
    var param = new Object();
    param.geoCoordMap = geoCoordMap;
    param.obusinessdata = [['一大队', Odata1], ['二大队', Odata2], ['三大队', Odata3]];
    param.dbusinessdata = [['一大队', Ddata1], ['二大队', Ddata2], ['三大队', Ddata3]];
    // map参数对象
    var options = new Object();
    options.type = "";
    options.mapOanalysisUrl = path + "/mapData/map/json/shanxi/changzhi.json";
    options.omapName = "changzhi";
    options.omap = "changzhi";
    options.ozoom = 8;
    options.ocenter = [113.101211, 36.218388];
    options.legendodata = ['一大队', '二大队', '三大队'];
    options.legendotop = "top";
    options.ocolor = ['#a6c84c', '#ffa022', '#46bee9'];
    options.displayoContent = function (params)
    {
        return params.seriesName + ">" + params.name +"</br>车流量为：" + params.value[2];
    }
    options.mapDanalysisUrl = path + "/mapData/map/json/shanxi/changzhi.json";
    options.dmapName = "changzhi";
    options.dmap = "changzhi";
    options.dzoom = 8;
    options.dcenter = [113.101211, 36.218388];
    options.legendddata = ['一大队', '二大队', '三大队'];
    options.legenddtop = "top";
    options.dcolor = ['#a6c84c', '#ffa022', '#46bee9'];
    options.displaydContent = function (params)
    {
        return params.name + ">" + params.seriesName +"</br>车流量为：" + params.value[2];
    }
    // echarts Id容器对象
    var divId = new Object();
    divId.OdivId = "OAnalysisMap";
    divId.DdivId = "DAnalysisMap";
    // 实例化接口对象
    var map = new TMap_Api();
    map.loadODanalysis(param,divId,options);


    /*var geoCoordMap = {
        '一大队': [113.1279, 36.2036],
        '二大队': [113.1164, 36.1715],
        '三大队': [113.0906, 36.2137],
        '四大队': [113.0926, 36.1474],
        '五大队': [113.1204, 36.2741],
        '七大队': [113.0790, 36.1828],
        '八大队': [113.1412, 36.3409]
    };

    var Odata1 = [
        [{name:'一大队'}, {name:'二大队',value:95}],
        [{name:'一大队'}, {name:'三大队',value:900}],
        [{name:'一大队'}, {name:'四大队',value:80}],
        [{name:'一大队'}, {name:'五大队',value:700}],
        [{name:'一大队'}, {name:'七大队',value:60}],
        [{name:'一大队'}, {name:'八大队',value:50}]
    ];

    var Odata2 = [
        [{name:'二大队'},{name:'一大队',value:95}],
        [{name:'二大队'},{name:'三大队',value:90}],
        [{name:'二大队'},{name:'四大队',value:80}],
        [{name:'二大队'},{name:'五大队',value:70}],
        [{name:'二大队'},{name:'七大队',value:600}],
        [{name:'二大队'},{name:'八大队',value:50}]
    ];

    var Odata3 = [
        [{name:'三大队'},{name:'一大队',value:95}],
        [{name:'三大队'},{name:'二大队',value:90}],
        [{name:'三大队'},{name:'四大队',value:80}],
        [{name:'三大队'},{name:'五大队',value:700}],
        [{name:'三大队'},{name:'七大队',value:60}],
        [{name:'三大队'},{name:'八大队',value:50}]
    ];

    var Ddata1 = [
        [{name:'二大队',value:95},{name:'一大队'}],
        [{name:'三大队',value:900},{name:'一大队'}],
        [{name:'四大队',value:80},{name:'一大队'}],
        [{name:'五大队',value:700},{name:'一大队'}],
        [{name:'七大队',value:60},{name:'一大队'}],
        [{name:'八大队',value:50},{name:'一大队'}]
    ];

    var Ddata2 = [
        [{name:'一大队',value:95},{name:'二大队'}],
        [{name:'三大队',value:90},{name:'二大队'}],
        [{name:'四大队',value:80},{name:'二大队'}],
        [{name:'五大队',value:70},{name:'二大队'}],
        [{name:'七大队',value:600},{name:'二大队'}],
        [{name:'八大队',value:50},{name:'二大队'}]
    ];

    var Ddata3 = [
        [{name:'一大队',value:95},{name:'三大队'}],
        [{name:'二大队',value:90},{name:'三大队'}],
        [{name:'四大队',value:80},{name:'三大队'}],
        [{name:'五大队',value:700},{name:'三大队'}],
        [{name:'七大队',value:60},{name:'三大队'}],
        [{name:'八大队',value:50},{name:'三大队'}]
    ];



    var mapOptionOanalysis;// 将读取的mapOption设置为全局变量，避免在使用该对象的时候重复读取。
    /!*
     * 读取echarts Option配置数据
     *!/
    $(function()
    {
        getOanalysisOption();
        getDanalysisOption();
    });
    /!**
     *   O分析
     * *!/
    /!*
     * 读取echarts Option配置数据
     *!/
    function getOanalysisOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../../config/odanalysis_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            mapOptionOanalysis = option;
            if(mapOptionOanalysis != null)
            {
                /!**
                 * 组装系列O分析业务数据，并渲染到地图
                 *!/
                //var planePath = "image://../images/mapIcons/blue.png";
                var dataItemO = []
                var obusinessdata = [['一大队', Odata1], ['二大队', Odata2], ['三大队', Odata3]]; //后台组装的业务数据
                var seriesOanalysis = [];
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItemO = data[i];
                        var fromCoord = geoCoordMap[dataItemO[0].name];
                        var toCoord = geoCoordMap[dataItemO[1].name];
                        if (fromCoord && toCoord) {
                            res.push({
                                fromName: dataItemO[0].name,
                                toName: dataItemO[1].name,
                                coords: [fromCoord, toCoord]
                            });
                        }
                    }
                    return res;
                };
                var color = ['#a6c84c', '#ffa022', '#46bee9']; // 切换业务数据所对应的渲染颜色
                obusinessdata.forEach(function (item, i)//O分析业务数据处理
                {
                    seriesOanalysis.push({
                            name: item[0],
                            type: 'lines',
                            zlevel: 1,
                            effect: { show: true, period: 6, trailLength: 0.7, color: '#fff', symbolSize: 3 },
                            lineStyle:
                            {
                                normal: { color: color[i], width: 0, curveness: 0.2 }
                            },
                            data: convertData(item[1])
                        },
                        {
                            name: item[0],
                            type: 'lines',
                            zlevel: 2,
                            symbol: ['none', 'none'],
                            symbolSize: 10,
                            effect: { show: true, period: 6, trailLength: 0, symbol: "triangle", symbolSize: 8 },
                            lineStyle:
                            {
                                normal: { color: color[i], width: 1, opacity: 0.6, curveness: 0.2 }
                            },
                            data: convertData(item[1])
                        },
                        {
                            name: item[0],
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            rippleEffect: { brushType: 'stroke' },
                            label:
                            {
                                normal: { show: true, position: 'right', formatter: '{b}' }
                            },
                            symbolSize: 10,
                            itemStyle:
                            {
                                normal: { color: color[i] }
                            },
                            data: item[1].map(function (dataItemO) { return { name: dataItemO[1].name, value: geoCoordMap[dataItemO[1].name].concat([dataItemO[1].value]) };})
                        });
                });
                getOanalysisMap(seriesOanalysis);
            }
        });
    }
    function getOanalysisMap(seriesOanalysis)
    {
        var mapChartoanalysis = echarts.init(document.getElementById('OAnalysisMap'));// 初始化echarts对象为mapChart
        mapChartoanalysis.showLoading();// 数据加载项，增强用户体验
        var mapUrl = "../../../mapData/map/json/shanxi/changzhi.json";// 地图json文件的地址
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            if(json != null)
            {
                echarts.registerMap("chanzghi", json); // 注册地图
                mapOptionOanalysis.geo.map = "chanzghi"; // 设置geo坐标系地图名称
                mapOptionOanalysis.geo.zoom = 8; // 设置地图缩放等级
                mapOptionOanalysis.geo.center = [113.101211, 36.218388];// 设置地图中心点
                mapOptionOanalysis.legend.data = ['一大队', '二大队', '三大队'];//图例data设置
                mapOptionOanalysis.legend.top = "top";//图例y轴位置 上、中、下英文
                mapOptionOanalysis.tooltip.formatter = displayContent;// 设置内容展示
                mapOptionOanalysis.series = seriesOanalysis;// 设置系列的动态生成系列值

                mapChartoanalysis.setOption(mapOptionOanalysis);// 把加工好的mapOption注入echarts api
                mapChartoanalysis.hideLoading();// 数据加载项，增强用户体验
            }
        });
    }
    /!**
     *   D分析
     * *!/
    /!*
     * 读取echarts Option配置数据
     *!/
    var mapOptionDanalysis;// 将读取的mapOption设置为全局变量，避免在使用该对象的时候重复读取。
    function getDanalysisOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../../config/odanalysis_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            mapOptionDanalysis = option;
            if(mapOptionDanalysis != null)
            {
                /!**
                 * 组装系列O分析业务数据，并渲染到地图
                 *!/
                var dataItemD = [];
                var seriesDanalysis = [];
                var dbusinessdata = [['一大队', Ddata1], ['二大队', Ddata2], ['三大队', Ddata3]]; //后台组装的业务数据
                //var planePath = "image://../images/mapIcons/blue.png";
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItemD = data[i];
                        var fromCoord = geoCoordMap[dataItemD[0].name];
                        var toCoord = geoCoordMap[dataItemD[1].name];
                        if (fromCoord && toCoord) {
                            res.push({
                                fromName: dataItemD[0].name,
                                toName: dataItemD[1].name,
                                coords: [fromCoord, toCoord]
                            });
                        }
                    }
                    return res;
                };
                var color = ['#a6c84c', '#ffa022', '#46bee9']; // 切换业务数据所对应的渲染颜色
                dbusinessdata.forEach(function (item, i)//D分析业务数据处理
                {
                    seriesDanalysis.push({
                            name: item[0],
                            type: 'lines',
                            zlevel: 1,
                            effect: { show: true, period: 6, trailLength: 0.7, color: '#fff', symbolSize: 3 },
                            lineStyle:
                                {
                                    normal: { color: color[i], width: 0, curveness: 0.2 }
                                },
                            data: convertData(item[1])
                        },
                        {
                            name: item[0],
                            type: 'lines',
                            zlevel: 2,
                            symbol: ['none', 'none'],
                            symbolSize: 10,
                            effect: { show: true, period: 6, trailLength: 0, symbol: "triangle", symbolSize: 8 },
                            lineStyle:
                                {
                                    normal: { color: color[i], width: 1, opacity: 0.6, curveness: 0.2 }
                                },
                            data: convertData(item[1])
                        },
                        {
                            name: item[0],
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            rippleEffect: { brushType: 'stroke' },
                            label:
                                {
                                    normal: { show: true, position: 'right', formatter: '{b}' }
                                },
                            symbolSize: 10,
                            itemStyle:
                                {
                                    normal: { color: color[i] }
                                },
                            data: item[1].map(function (dataItemD) { return { name: dataItemD[0].name, value: geoCoordMap[dataItemD[0].name].concat([dataItemD[0].value]) };})
                        });
                });
            }
            getDanalysisMap(seriesDanalysis);
        });
    }
    function getDanalysisMap(seriesDanalysis)
    {
        var mapChartdanalysis = echarts.init(document.getElementById('DAnalysisMap'));// 初始化echarts对象为mapChart
        mapChartdanalysis.showLoading();// 数据加载项，增强用户体验
        var mapUrl = "../../../mapData/map/json/shanxi/changzhi.json";// 地图json文件的地址
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            if(json != null)
            {
                echarts.registerMap("chanzghi", json); // 注册地图
                mapOptionDanalysis.geo.map = "chanzghi"; // 设置geo坐标系地图名称
                mapOptionDanalysis.geo.zoom = 8; // 设置地图缩放等级
                mapOptionDanalysis.geo.center = [113.101211, 36.218388];// 设置地图中心点
                mapOptionDanalysis.legend.data = ['一大队', '二大队', '三大队'];//图例data设置
                mapOptionDanalysis.legend.top = "top";//图例y轴位置 上、中、下英文
                mapOptionDanalysis.tooltip.formatter = displayContent;// 设置内容展示
                mapOptionDanalysis.series = seriesDanalysis;// 设置系列的动态生成系列值

                mapChartdanalysis.setOption(mapOptionDanalysis);// 把加工好的mapOption注入echarts api
                mapChartdanalysis.hideLoading();// 数据加载项，增强用户体验
            }
        });
    }
    /!*
     * 设置覆盖物鼠标移上去的展示形式，此处可以自定义，可以做成弹出框等等
     *!/
    var displayContent = function (params)
    {
        return params.seriesName + ">" + params.name +"</br>车流量为：" + params.value[2];
    }*/
</script>
</html>